<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>资讯信息</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
</head>
<body>

<script type="text/javascript">
    var btnList = ['layui-btn-warm','layui-btn-danger'];
    function dict(obj,types) {
        var str = "";
        var index = 0;
        if(types === "state" ){
            if(obj.state == 0){//禁用
                index = 1;
                str = "下架";
            }
            if(obj.state == 1){
                index = 0;
                str = "上架";
            }
        }
        if(types == "top"){
            if(obj.top == 0){
                index = 0;
                str="是"
            }
            if(obj.top == 1){
                index = 1;
                str = "否"
            }
        }
        if(types == "nominate"){
            if(obj.nominate == 0){
                index = 0;
                str = "是"
            }
            if (obj.nominate == 1){
                index = 1;
                str = "否"
            }
        }
        var btn = "<a class='layui-btn layui-btn-xs layui-btn-radius "+btnList[index]+"'>"+str+"</a>";
        return btn;
    }

</script>

<body>

<div class="layui-form searchTable">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" name="title" id="title" placeholder="请输入标题" autocomplete="off" class="layui-input datePicker">
        </div>
    </div>
    <button id="searchBtn" class="layui-btn" data-type="reload">搜索</button>

    &nbsp;&nbsp;&nbsp;
    请选择：
    <div class="layui-input-inline">
        <select name="classify" id="classifyQuery" >
            <option value="">全部分类</option>
            <th:block th:each="sort:${sortList}">
                <option th:value="${sort.name}">[[${sort.name}]]</option>
            </th:block>
        </select>
    </div>
    <button id="classifyBtn" class="layui-btn" data-type="reload">分类查询</button>

    &nbsp;&nbsp;&nbsp;
    请选择：
    <div class="layui-input-inline">
        <select name="state" id="states" >
            <option value="">全部状态</option>
            <option value="0">下架</option>
            <option value="1">上架</option>
        </select>
    </div>
    <button id="stateBtn" class="layui-btn" data-type="reload">状态查询</button>

</div>



<table class="layui-hide" id="message" lay-filter="message-query"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <div id="addMessage" class="layui-btn layui-btn-normal" lay-event="add">新增</div>
    </div>
</script>

<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="编辑">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除">删除</a>
</script>

<script>
    layui.use(['jquery','table','form','laydate'],function () {
        var table = layui.table;//表单
        var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;

        table.render({
            elem:'#message',
            url:'/message/query',
            method: 'post',
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            title: 'message',
            cols: [
                [
                    {type: 'checkbox', fixed: 'left',align:'center'},
                    {field: 'id', title:'ID', align:'center'},
                    {field: 'number', title:'编号', align:'center'},
                    {field: 'sortname', title:'分类名称', align:'center'},
                    {field: 'title', title:'标题', align:'center'},
                    {field: 'state', title:'状态', align:'center', templet:function (data) {return dict(data,"state");}},
                    {field: 'publishdate', title:'发布时间', align:'center'},
                    {field: 'nominate', title:'推荐', align:'center', templet:function (data) {return dict(data,"nominate");}},
                    {field: 'top', title:'置顶', align:'center', templet:function (data) {return dict(data,"top");}},
                    {field: 'browse', title:'浏览数', align:'center'},
                    {field: 'discuss', title:'评论数', align:'center'},
                    {field: 'answer', title:'回答数', align:'center'},
                    {field: 'collect', title:'收藏数', align:'center'},
                    {field: 'createdate', title:'创建时间', align:'center'},
                    {field: 'updatedate', title:'更新时间', align:'center'},
                    {fixed: 'right', title:'操作', toolbar: '#operation', align:'center'}
                ]
            ],
            page: true,//每页条数默认10
            request: {
                pageName :"currentPage",
                limitName : "pageSize"
            },
            parseData: function (res) {//res 即为原始返回的数据
                console.log(res);
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.list //解析数据列表
                };
            }

        });

        //模糊查询
        var $  = layui.$;
        var active = {
            reload : function () {
                var vague = $("#title").val();
                var obj = {};
                if(vague != ""){
                    obj['title'] = vague;
                }
                if(vague == null || vague == ""){
                    layer.msg("请输入值");
                    return;
                }
                table.reload('message',{
                    page: {
                        curr : 1
                    },
                    url: '/message/query-vague/'+vague,
                    method : 'POST',
                    where : obj,
                    done : function (res,curr,count) {
                        this.where  = {};
                    }
                },'data');
            }
        };

        $("#searchBtn").on("click",function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : "";
        });

        //分类名称查询
        $("#classifyBtn").on("click",function () {
            var sortname = $("#classifyQuery").val();
            var obj = {
                sortname : sortname
            };
            var sortNameUrl;
            if(sortname == null || sortname === ""){
                sortNameUrl = '/message/query';
            }else{
                sortNameUrl = '/message/query-sortname/'+sortname;
            }
            table.reload('message',{
                page: {
                    curr : 1
                },
                url: sortNameUrl,
                method : 'POST',
                where : obj,
                done : function (res,curr,count) {
                    this.where  = {};
                }
            },'data');
        });

        //状态查询
        $("#stateBtn").on("click",function () {
            var state = $("#states").val();
            var obj = {
                state : state
            };
            var url;
            if(state == null || state === ""){
                url = '/message/query';
            }else{
                url = '/message/query-state/'+state;
            }
            table.reload('message',{
                page: {
                    curr : 1
                },
                url: url,
                method : 'POST',
                where : obj,
                done : function (res,curr,count) {
                    this.where  = {};
                }
            },'data');
        });

        //新增
        table.on("toolbar(message-query)",function (object) {
            switch(object.event){
                case "add" ://表格头部事件为新增
                {
                    var index = layer.open({
                        type:2,
                        area :['700px','450px'],
                        fixed: false,
                        maxmin: true,
                        content : '/message/add'
                    });
                    layer.full(index);
                }

                    break;
            }
        });

        //编辑 or 删除
        table.on("tool(message-query)",function (object) {
            var data = object.data;//获取到你点击的哪一行的所有数据
            if(object.event === "edit"){//编辑
                //iframe层-父子操作
                var editIndex = layer.open({
                    type:2,
                    area :['700px','450px'],
                    fixed: false,
                    maxmin: true,
                    content : '/message/edit?id='+data.id
                });
                layer.full(editIndex);
            }else if(object.event === "del"){//删除
                layer.confirm('确认要删除这条数据吗？', function(index){
                    object.del();
                    var obj = {
                        number: data.number,
                        typees: data.typees
                    };
                    $.post("/message/del",obj,function (data) {
                        if(data.success){
                            layer.msg("删除成功",{
                                icon: 1,
                                time: 10000
                            });
                        }else{
                            layer.msg("删除失败",{
                                icon: 1,
                                time: 20000
                            });
                        }
                    },"json");
                    layer.close(index);
                });
            }
        })
    })
</script>

</body>
</html>